//Component Object
Component({
  properties: {
    lineColor: {
      type: String,
      value: "rgba(241,159,180,1)",
    },
    lineWidth: {
      type: [Number, String],
      value: 4,
    },
  },
  data: {
    canvas: null,
    ctx: null,
    drawing: false,
  },
  methods: {
    drawBegin(e) {
      this.clear();
      let { x, y } = e.changedTouches[0];
      this.setData({
        drawing: true,
      });
      this.data.ctx.moveTo(x, y);
      this.data.ctx.beginPath();
    },
    drawMove(e) {
      let { x, y } = e.changedTouches[0];
      if (this.data.drawing) {
        this.data.ctx.lineTo(x, y);
        this.data.ctx.stroke();
        this.data.ctx.moveTo(x, y);
        this.data.ctx.restore();
        // this.data.ctx.draw();
      }
    },
    drawEnd() {
      this.setData({
        drawing: false,
      });
    },
    canvasInit() {
      return new Promise((resolve, reject) => {
        reject;
        this.createSelectorQuery()
          .select("#canvas")
          .fields({
            node: true,
            size: true,
          })
          .exec((res) => {
            console.log(res);
            const width = res[0].width;
            const height = res[0].height;

            const canvas = res[0].node;
            const ctx = canvas.getContext("2d");

            const dpr = wx.getSystemInfoSync().pixelRatio;
            canvas.width = width * dpr;
            canvas.height = height * dpr;
            ctx.scale(dpr, dpr);

            this.setData({
              canvas: canvas,
              ctx: ctx,
            });
            resolve();
          });
      });
    },
    drawTipAnimation() {
      console.log("drawTipAnimation");
      let ctx = this.data.ctx;
      ctx.beginPath();

      let width = this.data.canvas.width;
      console.log(width);
      let paths = [];
      for (let i = 0; i < 50; i++) {
        let step = (i / 50) * (Math.PI * 2); //设置心上面两点之间的角度，具体分成多少份，好像需要去试。
        let vector = {
          x: 1 * (16 * Math.pow(Math.sin(step), 3)),
          y:
          1 *
            (13 * Math.cos(step) -
              5 * Math.cos(2 * step) -
              2 * Math.cos(3 * step) -
              Math.cos(4 * step)),
        };
        paths.push([vector.x, vector.y]);
      }
      console.log(paths);
      let step = 0;
      const drawAnimation = () => {
        console.log("drawAnimation");
        if (step === 0) {
          ctx.moveTo(...paths[step]);
          step++;
          setTimeout(() => {
            this.data.canvas.requestAnimationFrame(drawAnimation);
          }, 100);
        } else {
          ctx.lineTo(...paths[step]);
          ctx.stroke();
          ctx.moveTo(...paths[step]);
          if (step === paths.length - 1) {
            ctx.closePath();
          } else {
            step++;
            setTimeout(() => {
              this.data.canvas.requestAnimationFrame(drawAnimation);
            }, 1000);
          }
        }
      };
      drawAnimation();
    },
    clear() {
      this.data.ctx.clearRect(
        0,
        0,
        this.data.canvas.width,
        this.data.canvas.height
      );
    },
    // 保存成图片
    saveToImg() {
      return new Promise((resolve, reject) => {
        wx.canvasToTempFilePath({
          canvasId: "canvas",
          canvas: this.data.canvas,
          success: (res) => {
            resolve(res.tempFilePath);
          },
          fail: (err) => {
            reject(err);
          },
        });
      });
    },
  },
  created: function () {},
  attached: function () {},
  ready: function () {
    this.canvasInit().then(() => {
      this.data.ctx.strokeStyle = this.properties.lineColor;
      this.data.ctx.lineWidth = Number(this.properties.lineWidth);

      // 提示动画
      // this.drawTipAnimation();
    });
  },
  moved: function () {},
  detached: function () {},
});
